<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的购物车-小米商城</title>
		<link rel="icon" href="/img/milogo.ico" type="image/x-icon">
		<link rel="stylesheet" type="text/css" href="/font/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="/CSS/reset.css"/>
		<link rel="stylesheet" type="text/css" href="/CSS/currency.css"/>
		<link rel="stylesheet" type="text/css" href="/CSS/cart.css"/>
	</head>
	<body>
		<!-- 我的购物车顶部导航栏 -->
		<div class="header-box">
			<div class="container clearfix">
				<div class="fl header-left">
					<div class="iconfont icon-icon-xiaomiguishu"></div>
					<div>我的购物车</div>
					<div>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</div>
				</div>
				<div class="fr header-right">
					<ul>
						<li class="user-title">
							<p style="font-size: 16px">
								[[${session.currentUser.username}]]<span style="margin-left: 4px" class="iconfont icon-xia"></span>
							</p>
							<div class="user-list">
								<ul>
									<li>个人中心</li>
									<li>评价晒单</li>
									<li>我的喜欢</li>
									<li>小米账户</li>
									<li>退出登录</li>
								</ul>
							</div>
						</li>
						<li><a href="/personal/order" target="_blank">我的订单</a></li>
					</ul>
				</div>
			</div>
		</div>
		
		<!-- 购物车  列表详情 -->
		<div class="cart-list">
			<div id="result" class="container">
				<div class="list-title">
					<div><input class="allChec" type="checkbox" />全选</div>
					<div><!-- 商品图片占位 --></div>
					<div>商品名称</div>
					<div>单价</div>
					<div>数量</div>
					<div>小计</div>
					<div>操作</div>
				</div>
				<div class="list-body" th:each="c:${carts}">
					<div><input th:cid="${c.id}" class="chec1" type="checkbox" /></div>
					<div><img th:src="${c.imgPath}"  alt=""></div>
					<div th:text="${c.name}"></div>
					<div class="price1" th:text="${c.price}"></div>
					<div class="num-box">
						<button  class="num-reduce" disabled>-</button>
						<input  class="num" readonly type="text" th:value="${c.amount}"/>
						<button  class="num-add">+</button>
					</div>
					<div class="cost1" th:text="${c.amount*c.price}"></div>
					<div><span class='del'>X</span></div>
				</div>
			</div>
		</div>
		<!-- 结算界面 -->
		<div class="cart-bottom">
            <form id="form1" action="/confirm" method="post">
                <input type="hidden" id="ids" name="ids"/>
                <div class="container clearfix">
                    <div class="fl left">
                        <span><a href="index.html">继续购物</a></span>
                        <span>共 <b id="product-num">0</b> 件商品，已选择 <span id="choice-num">0</span>件</span>
                    </div>
                    <div class="fr">
                        <span>合计<b id="total-num">0</b></span>
                        <button type="button" id="payBtn" class="">去结算</button>
                    </div>
                </div>
            </form>
		</div>
		
		
		<!-- 数量为0时的弹出框 -->
		<div class="alert-box">
			<div class="alert">
				<div style="text-align: right;margin: 10px 10px 0 0;">X</div>
				<div style="font-size: 26px;color: #333333;margin: 70px 10px;">修改数量不能小于0</div>
				<div style="background-color: #f5f5f5;padding: 20px;"><button id="determine" type="button" style="padding: 10px 50px;background-color: #FF6700;border: 1px;color: #ffffff;">确定</button></div>
			</div>
		</div>
		
		<!-- 购物车为空时的显示界面 -->
		<div class="zero">
			<div class="container clearfix">
				<img src="/img/cart-empty.png" class="fl">
				<h2>您的购物车还是空的！</h2>
				<div><button type="button"><a href="index.html">马上去购物</a></button></div>
			</div>
		</div>
		<th:block th:include="footer"/>
        <script src="/layui/layui.js"></script>
        <script>
            layui.use(["layer"],function(){
                var $ = layui.jquery;
                var getCartIds = function (){
                    var ids="";
                   $.each($(".chec1:checked"),function(index,item){
                        if(ids){
                            ids+=",";
                        }
                        ids+=$(item).attr("cid");
                   });
                   $("#ids").val(ids);
                };
                $("input[type=checkbox]").on("click",function(){
                    getCartIds();
                });
                $("#payBtn").on("click",function(){
                    if($("#ids").val()){
                        $("#form1").submit();
                    }else{
                        layer.msg("请至少　选择一个商品");
                    }
                });
            });
        </script>
		<script src="/JS/cart.js"></script>
	</body>
</html>
